<template>
  <div class="gas-price">
    <i class="iconfont icon-gas"></i>
    <span class="name">Gas Price ( <span>{{ chainCode }}</span> )</span>
    <span class="value" v-if="gasPrice">{{ gasPrice }}Gwei</span>
    <svg
      version="1.1"
      id="L9"
      viewBox="0 0 100 100"
      enable-background="new 0 0 0 0"
      xml:space="preserve"
      v-else
    >
      <path
        fill="#fff"
        d="M73,50c0-12.7-10.3-23-23-23S27,37.3,27,50 M30.9,50c0-10.5,8.5-19.1,19.1-19.1S69.1,39.5,69.1,50"
      >
        <animateTransform
          attributeName="transform"
          attributeType="XML"
          type="rotate"
          dur="1s"
          from="0 50 50"
          to="360 50 50"
          repeatCount="indefinite"
        ></animateTransform>
      </path>
    </svg>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  computed: {
    ...mapState({
      gasPrice: (state) => state.gasPrice,
      chainCode: (state) => state.chainCode,
    }),
  },
};
</script>

<style lang="scss" scoped>
.gas-price {
  margin-top: 20px;
  display: flex;
  align-items: center;

  i {
    font-size: 18px;
    color: var(--color-content);
    margin-right: 5px;
  }

  img {
    width: 36px;
    border-radius: 18px;
    box-sizing: border-box;

    margin-right: 7px;
  }
  span {
    font-size: 14px;
    font-family: "Roboto Medium";
    color: var(--color-content);

    &.name {
      margin-right: 10px;
      span {
        text-transform: uppercase;
      }
    }

    &.symbol {
      margin-right: 22px;
    }
  }

  svg {
    width: 30px;
  }
}
</style>
